<template>
  <div class="container flex flex-direction">
    <!-- <bread-crumb :jump-type="type" style="margin-top: 1.125rem;">{{ type == 'TechnologyResultsLibrary' ? '科技成果库详情' : '科技成果展详情' }}</bread-crumb> -->
    <Bread />
    <div class="flex needs_card">
      <div class="image">
        <el-image
          :src="data.picture"
          fit="cover"
          style="width: 100%;height: 100%;"
        >
          <div slot="error" style="width: 100%; height: 100%;">
            <el-image
              :src="require('@/assets/img/pic_error2.png')"
              style="width: 100%; height: 100%;"
            ></el-image>
          </div>
        </el-image>
      </div>
      <div class="flex-sub flex flex-direction justify-between context">
        <div class="title">{{ data.title }}</div>
        <div class="flex flex-direction justify-center desc">
          <div class="title">成果情况</div>
          <div class="info">
            <div>
              <span>所在院校/单位：</span>
              <span>{{ data.fromCollege }}</span>
            </div>
            <div>
              <span>所属领域：</span>
              <span>{{ data.fieldName }}</span>
            </div>
            <div>
              <span>合作方式：</span>
              <span>{{ data.cooperationName }}</span>
            </div>
            <div>
              <span>成果阶段：</span>
              <span>{{ data.phaseName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-direction detail_box">
      <div class="detail_header">成果详情</div>
      <div class="detail_content" v-html="data.content"></div>

      <!-- <el-row>
        <el-col :span="16">
          <div class="detail_content" v-html="data.content"></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
       -->
    </div>

    <!-- 打开对话框 -->
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="44.5rem"
      style="text-align: center;"
    >
      <el-image
        :src="require('@/assets/img/qrcode/qrcode.png')"
        fit="fill"
        style="width: 44.5rem;height: 30rem;"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
// import BreadCrumb from '@/components/BreadCrumb.vue';
import Bread from '@/components/Bread'

import {
  requestScienceResultLibraryInfo,
  requestScienceResultExhibitionInfo,
} from '@/api/techShowList.js'

export default {
  name: 'TechnologyDetail',
  components: { Bread },
  data() {
    return {
      // 是否打开对话框
      centerDialogVisible: false,

      // 当前需展示的新闻类型
      type: 'needs',

      // 新闻内容
      data: {
        bgUrl: '#',
        content: ``,
        id: 0,
      },
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log('to')
      console.log(to)
      vm.type = to.params.type
      vm.data.id = to.params.id
    })
  },
  mounted() {
    this.request()
  },
  methods: {
    request() {
      switch (this.type) {
        case 'TechnologyResultsLibrary':
          requestScienceResultLibraryInfo({ id: this.data.id }).then((res) => {
            if (res.code === 200) {
              this.data = res.data
            }
          })
          break
        case 'TechnologyResultsExhibition':
          requestScienceResultExhibitionInfo({ id: this.data.id }).then(
            (res) => {
              if (res.code === 200) {
                this.data = res.data
              }
            }
          )
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin: auto;
  padding: 13px;
  width: 1226px;
}
.needs_card {
  margin-top: 3.375rem;

  .image {
    width: 32rem;
    height: 17.5rem;
  }

  .context {
    margin-left: 1rem;
    height: 17.5rem;

    .title {
      width: 100%;
      height: auto;
      font-size: 15px;
      font-weight: bold;
      color: #333;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    .desc {
      padding: 0 1.6875rem;
      width: 100%;
      height: 14.25rem;
      border: 1px dashed #e2e2e2;

      .title {
        font-weight: bold;
        color: #333;
      }

      .info {
        margin-top: 1.5rem;

        & > div:not(:first-child) {
          margin-top: 0.5rem;
        }
      }
    }
  }
}

.detail_box {
  margin-top: 1rem;
  margin-bottom: 7.5rem;
  padding: 1.625rem 0;

  .detail_header {
    position: relative;
    font-size: 1.125rem;
    font-weight: bold;
    color: #333;
  }

  .detail_content {
    padding: 1rem 0;
    width: 100%;
    min-height: 20vh;

    ::v-deep img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

/* 修改弹窗样式 */
::v-deep .el-dialog {
  height: 30rem;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
  }
}
</style>
